<template>
  <div class="orderDetail">
    <x-header>订单详情</x-header>
    <div class="order">
      <div class="status">交易已完成</div>
      <div class="shop">
        <img src="assets/shop1.png" alt="">
        <span class="name">{{detail.shop}} ></span>
        <span class="status">{{detail.status}}</span>
      </div>
      <div class="products" v-for="obj in detail.products" :key='obj.id'>
        <router-link :to="'/detail?id='+obj.id">
          <div class="productImg">
            <img :src="obj.url" alt="">
          </div>
          <div class="productInfo">
            <div>
              <span class='name'>{{obj.name}}</span>
              <span class='price'>¥{{obj.price}}</span>
            </div>
            <div>
              <span class="type">{{obj.type}}</span>
              <span class="count">x{{obj.count}}</span>
            </div>
          </div>
        </router-link>
      </div>
      <div class='orderTotal'>
        <div class='money'>
          <span class='title'>商品金额</span>
          <span>¥{{detail.total}}</span>
        </div>
        <div class='discount'>
          <span class='title'>优惠</span>
          <span>- ¥5.00</span>
        </div>
        <div class='postage'>
          <span class='title'>运费</span>
          <span>¥{{detail.postage}}</span>
        </div>
        <div class='realpay'>
          <span>实付款：</span>
          <span class='totalMoney'>¥{{detail.total}}</span>
        </div>
      </div>
      <div class="logisticsInfo">
        <div>物流信息</div>
        <div>物流信息</div>
      </div>
      <div class="telphone">
        <a href="tel:400-110-110">拨打商家电话</a>
      </div>
      <div class='orderInfo'>
        <div>订单编号：88888888</div>
        <div>下单时间：2018-01-12 12:12:12</div>
        <div>付款时间：2018-01-12 12:12:12</div>
        <div>发货时间：2018-01-12 12:12:12</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      detail: {
        id: 1,
        shop: '花之林',
        status: '待付款',
        products: [
          { id: 1, name: '粉色多头玫瑰', type: '粉色', price: '58', count: 1, url: 'src/assets/flower1.jpg' },
        ],
        postage: '0.00',
        total: '88',
      },
    }
  }
}
</script>

<style lang="less" scoped>
.order {
  padding: 10px;
  .shop {
    img {
      width: 16px;
      height: 16px;
      vertical-align: middle;
      margin-bottom: 3px;
    }
    .status {
      float: right;
      margin-right: 6px;
      font-size: 14px;
      color: #ffa534;
    }
  }
  .products {
    overflow: hidden;
    height: 70px;
    margin-bottom: 6px;
    .productImg {
      float: left;
      width: 25%;
      box-sizing: border-box;
      text-align: center;
      img {
        background: #c9c9c9;
        height: 60px;
        width: 60px;
        margin-top: 5px;
      }
    }
    .productInfo {
      float: right;
      width: 75%;
      box-sizing: border-box;
      > div {
        line-height: 34px;
        .type {
          font-size: 14px;
          color: #a3a3a3;
        }
        > span:last-child {
          float: right;
          margin-right: 6px;
          font-size: 14px;
        }
      }
    }
  }
  .orderTotal {
    font-size: 13px;
    border-top: 1px solid #c6c6c6;
    border-bottom: 1px solid #c6c6c6;
    padding: 10px 0;
    > div {
      text-align: right;
      padding-right: 6px;
    }
    .title {
      color: #a3a3a3;
      float: left;
    }
  }
  .logisticsInfo {
    margin: 10px 0;
    > div {
      height: 60px;
    }
    > div:first-child {
      border-bottom: 1px solid #c6c6c6;
      margin-bottom: 10px;
    }
  }
  .telphone {
    text-align: center;
    line-height: 40px;
    border-top: 1px solid #c6c6c6;
    border-bottom: 1px solid #c6c6c6;
    a {
      display: block;
    }
  }
  .orderInfo {
    font-size: 13px;
    color: #a3a3a3;
    padding: 10px 0;
    div {
      line-height: 22px;
    }
  }
}
</style>

